<template>
	<div style="height: 80vh;">
		<div style="width: 100%;display: flex;">
			<h4>教务处--教学安排</h4>
		</div>
		<hr>
		<div style="width: 100%;display: flex;flex-direction:column;">
			
			<div style="display: flex;flex-direction: row;justify-content: space-around;">
				<p>教师:
					<select v-model="task.user.uid">
						<option v-for="t in teas" 
							v-bind:value="t.uid" 
							v-bind:selected="task.user.uid == t.uid">
							{{t.uname}}
						</option>
					</select>
				</p>
				<p>班级:
					<select v-model="task.clz.clzno">
						<option v-for="c in clzs" 
							v-bind:value="c.clzno" 
							v-bind:selected="task.clz.clzno == c.clzno">
							{{c.clzname}}
						</option>
					</select>
				</p>
				<p>课程:
					<select v-model="task.course.cno">
						<option v-for="c in courses" 
							v-bind:value="c.cno" 
							v-bind:selected="task.course.cno == c.cno">
							{{c.cname}}
						</option>
					</select>
				</p>
				<p><button @click="doAdd()">添加新的课程安排</button></p>
			</div>
			<div style="height: 100%;">
				<table border="1" style="width: 95%">
					<tbody>
						<tr style="background-color: gainsboro">
							<th>教师编号</th>
							<th>教师名称</th>
							<th>班级编号</th>
							<th>班级名称</th>
							<th>课程编号</th>
							<th>课程名称</th>
							<th>操作</th>
						</tr>
						<tr v-for="t in tasks">
							<td>{{t.user.uid}}</td>
							<td>{{t.user.uname}}</td>
							<td>{{t.clz.clzno}}</td>
							<td>{{t.clz.clzname}}</td>
							<td>{{t.course.cno}}</td>
							<td>{{t.course.cname}}</td>
							<td><button @click="del(t.kid)">删除</button></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		
		
	</div>
</template>

<script>
	export default {
		name: 'AdmTask',
		data() {
			return{
				teas:[],
				clzs:[],
				courses:[],
				tasks:[],
				task:{
					kid:0,
					user:{uid:0},
					clz:{clzno:0},
					course:{cno:0}
				}
				
			}
		},
		methods:{
			del(kid){
				console.log("删除安排的表id=" + kid)
				let url = `${this.$ip}/api/adm/task/del/`+kid;
				console.log("删除安排url=" + url)
				//初始化班级
				this.$axios.get(url,this.$store.state.user.to)
				.then(resp => {
					console.log(resp.data);
					this.tasks = resp.data.data;
				})
			},
			doAdd(){
				let url = `${this.$ip}/api/adm/task/add`;
				this.$axios.post(url,this.task,this.$store.state.user.to)
				.then(resp =>{
					console.log(resp.data);
					this.tasks = resp.data.data;
				})
			}
		},
		mounted() {
			//初始化班级
			this.$axios.get(`${this.$ip}/api/public/getClzs`,this.$store.state.user.to)
			.then(resp => {
				console.dir(resp.data.data)
				this.clzs = resp.data.data
			})
			//初始化课程
			this.$axios.get(`${this.$ip}/api/public/getCourses`,this.$store.state.user.to)
			.then(resp => {
				console.dir(resp.data.data)
				this.courses = resp.data.data
			})
			//初始化教师
			this.$axios.get(`${this.$ip}/api/public/getTeachers`,this.$store.state.user.to)
			.then(resp => {
				console.dir(resp.data.data)
				this.teas = resp.data.data
			})
			//初始化教学安排
			this.$axios.get(`${this.$ip}/api/adm/task/findAll`,this.$store.state.user.to)
			.then(resp => {
				console.dir(resp.data.data)
				this.tasks = resp.data.data
			})
		}
		
	}
</script>

<style>
	select{
		width: 14vw;
	}
	td{
		font-size: 0.8em;
	}
</style>